<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="/plugin/bootstrap/css/bootstrap.min.css" />
    <script src="/plugin/jquery/jquery.1.11.3.min.js"></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/echarts/echarts.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-1"></div>
            <div id="e-line" class="col col-md-10" style="height:600px;"></div>
        </div>
    </div>
<script type="text/javascript">
var option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line'
    },{
        data: [],
        type: 'line'
    }]
},
day = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
$line,ec1;
function nextVal(v_){
    var x;
    do{
        x = v_+ Math.ceil(Math.random()*500)-250;
    } while(x<0 || x>2000);
    return x;
}
function nextDay(v_) {
    var _i = day.indexOf(v_);
    _i = _i+1;
    if(_i==7) _i=0;
    return day[_i];
}
function addArray(arr,len){
    var _v=arr[arr.length-1];
    _v=nextVal(_v);
    arr.push(_v);
    if(arr.length > len) arr.shift();
}
function addDay(arr,len){
    var _v=arr[arr.length-1];
    _v=nextDay(_v);
    arr.push(_v);
    if(arr.length > len) arr.shift();
}
$(function(){
    $line = $('#e-line');
    ec1 = echarts.init($line[0]);

    option.series[0].data.push(500);
    option.series[1].data.push(500);
    option.xAxis.data.push('Mon');
    ec1.setOption(option);
    setInterval(function(){
        addArray(option.series[0].data,10);
        addArray(option.series[1].data,10);
        addDay(option.xAxis.data,10);
        ec1.setOption(option);
    }, 3000);
});
</script>
</body>
</html>